<template>
	<view class="time-picker-top">
		<c-cell-group>
			<c-cell :title="title" is-link :value="cellValue" @click.native="open"></c-cell>
		</c-cell-group>
		<view class="time-picker" :style="pickerShow?'opacity:1;z-index:999':'opacity:0;z-index:-1'">
			<view class="time-picker-bg" @click="close"></view>
			
			<view class="picker-div" :style="pickerShow?'transform: translateY(0%);':'transform: translateY(100%);'" >
				<view class="picker-header">
					<view class="close" @click="close">取消</view>
					<view class="location">{{outputTitle.lista.name}}-{{outputTitle.listb.name}}-{{outputTitle.listc.name}}</view>
					<view class="sure" @click="sure">确定</view>
				</view>
				<picker-view indicator-style="height: 34px;"
				class="time-picker-view" 
				:value="nvalue" 
				@change="bindChange">
					<picker-view-column>
						<view class="picker-item" v-for="item in pickerList01">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="item in pickerList02">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="picker-item" v-for="item in pickerList03">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	var address = require("../common/cityData.js");
	export default{
		props:{
			type:{
				type:String,
				default:"date"
			},
			title:{
				type:String,
				default:"选择日期"
			},
			value:{
				type:[Array,String],
				default:""
			}
		},
		data(){
			return{
				time:"",
				nvalue:[0,0,0],
				outData:[],
				pickerList01:[],
				pickerList02:[],
				pickerList03:[],
				outputTitle:{},
				cellValue:"",
				pickerShow:false
			}
		},
		created() {
			this.init_created(this.type)
			// 解决微信picker-view的value不赋值问题，value要在生成picker-view-column里边的项目之后再setData
		},
		methods:{
			init_created:function(type){
				var time = {}
				time.stamp = parseInt(new Date().getTime() / 1000);
				time.year = new Date().getFullYear();
				time.month = new Date().getMonth() + 1;
				time.day = new Date().getDate();
				time.hour = new Date().getHours();
				time.minute = new Date().getMinutes();
				time.second = new Date().getSeconds();
				this.time = time;
				const that = this;
				switch(type){
					case "date":
						that.get_year()
						that.get_month()
						that.get_day(that.nvalue[0],that.nvalue[1])
					break;
					case "time":
						that.get_hour()
						that.get_minute()
						that.get_second()
					break;
					case "address":
						that.get_province()
					break;
				}
			},
			init:function(){
				const that = this;
				// console.log(typeof(this.value),this.value,!this.value)
				this.init_created()
				switch(that.type){
					case "date":
						if(!that.value){
							that.output01(that.nvalue,that.get_year(),that.get_month(),that.get_day(that.nvalue[0],that.nvalue[1]))
						}else{
							that.nvalue = that.value
							that.output02(that.nvalue,that.get_year(),that.get_month(),that.get_day(that.nvalue[0],that.nvalue[1]))
						}
					break;
					case "time":
						if(!that.value){
							that.output03(that.nvalue,that.get_hour(),that.get_minute(),that.get_second())
						}else{
							that.nvalue = that.value
							that.output04(that.nvalue,that.get_hour(),that.get_minute(),that.get_second())
						}
					break;
					case "address":
						if(this.value){
							this.nvalue = this.value
							this.get_province()
						}
					break;
				}
			},
			open:function(){
				this.pickerShow = true
				this.init()
			},
			close:function(){
				this.pickerShow = false
			},
			get_year:function(){
				var now_year = this.time.year
				var year = [];
				for(var i = now_year-20;i<=now_year+20;i++){
					var obj = {};
					obj.name = i+'年';
					obj.value = i;
					year.push(obj)
				}
				this.pickerList01 = year;
				return year;
			},
			get_month:function(){
				var month = [];
				for(var i = 1;i<=12;i++){
					var obj = {};
					obj.name = i+'月';
					obj.value = i;
					month.push(obj)
				}
				this.pickerList02 = month;
				return month;
			},
			get_day:function(val_year,val_month){
				var day = [];
				// console.log("this.pickerList01",this.pickerList01)
				var year = this.pickerList01[val_year].value;
				var month = this.pickerList02[val_month].value;
				// console.log(year,month)
				if(year%4==0&&year%100!=0){  //判断闰年
					if(month!=2){
						if(month==7||month==8){
							for(var i = 1;i<=31;i++){
								var obj = {};
								obj.name = i+'日';
								obj.value = i;
								day.push(obj)
							}
						}else{
							if(month>8){month++}
							if(month%2!=0){
								for(var i = 1;i<=31;i++){
									var obj = {};
									obj.name = i+'日';
									obj.value = i;
									day.push(obj)
								}
							}else{
								for(var i = 1;i<=30;i++){
									var obj = {};
									obj.name = i+'日';
									obj.value = i;
									day.push(obj)
								}
							}
						}
					}else{
						for(var i = 1;i<=29;i++){
							var obj = {};
							obj.name = i+'日';
							obj.value = i;
							day.push(obj)
						}
					}
				}else{
					if(month!=2){
						if(month%2!=0){
							for(var i = 1;i<=31;i++){
								var obj = {};
								obj.name = i+'日';
								obj.value = i;
								day.push(obj)
							}
						}else{
							for(var i = 1;i<=30;i++){
								var obj = {};
								obj.name = i+'日';
								obj.value = i;
								day.push(obj)
							}
						}
					}else{
						for(var i = 1;i<=28;i++){
							var obj = {};
							obj.name = i+'日';
							obj.value = i;
							day.push(obj)
						}
					}
				}
				this.pickerList03 = day;
				return day;
			},
			get_hour:function(){
				var hour = []
				for(var i = 1;i<=24;i++){
					var obj = {};
					obj.name = (i-1)+'时';
					obj.value = i-1;
					hour.push(obj)
				}
				this.pickerList01 = hour;
				return hour;
			},
			get_minute:function(){
				var minute = []
				for(var i = 1;i<=60;i++){
					var obj = {};
					obj.name = (i-1)+'分';
					obj.value = i-1;
					minute.push(obj)
				}
				this.pickerList02 = minute;
				return minute;
			},
			get_second:function(){
				var second = []
				for(var i = 1;i<=60;i++){
					var obj = {};
					obj.name = i+'秒';
					obj.value = i-1;
					second.push(obj)
				}
				this.pickerList03 = second;
				return second;
			},
			get_province:function(){
				var id = this.nvalue[0]
				this.pickerList01 = address.provinces
				this.outputTitle.lista = {}
				this.outputTitle.lista.name = address.provinces[id].name
				this.get_citys(address.provinces[id].id)
			},
			get_citys:function(id){
				var id1 = this.nvalue[1]
				this.pickerList02 = address.citys[id]
				this.outputTitle.listb = {}
				this.outputTitle.listb.name = address.citys[id][id1].name
				this.get_areas(address.citys[id][id1].id)
			},
			get_areas:function(id){
				var id2 = this.nvalue[2]
				this.pickerList03 = address.areas[id]
				this.outputTitle.listc = {}
				this.outputTitle.listc.name = address.areas[id][id2].name
			},
			output01:function(value,year_data,month_data,day_data){
				const that = this;
				var value_now = [0,0,0]
				//设置默认时间（当前时间）
				for(var y of year_data){
					if(y.value == this.time.year){
						break;
					}else{
						value_now[0]++
					}
				}
				for(var y of month_data){
					if(y.value == this.time.month){
						break;
					}else{
						value_now[1]++
					}
				}
				for(var y of day_data){
					if(y.value == this.time.day){
						break;
					}else{
						value_now[2]++
					}
				}
				// console.log(value_now)
				var output_ymd = {};
				output_ymd.lista = year_data[value_now[0]] //year
				output_ymd.listb = month_data[value_now[1]] //month
				output_ymd.listc = day_data[value_now[2]] //day
				this.outputTitle = output_ymd
				this.nvalue = value_now
			},
			output02:function(value,year_data,month_data,day_data){
				const that = this;
				var output_ymd = {};
				output_ymd.lista = year_data[value[0]] //year
				output_ymd.listb = month_data[value[1]] //month
				output_ymd.listc = day_data[value[2]] //day
				// console.log(output_ymd)
				this.outputTitle = output_ymd
			},
			output03:function(value,hour_data,minute_data,second_data){
				const that = this;
				var value_now = [0,0,0]
				//设置默认时间（当前时间）
				for(var y of hour_data){
					if(y.value == this.time.hour){
						break;
					}else{
						value_now[0]++
					}
				}
				for(var y of minute_data){
					if(y.value == this.time.minute){
						break;
					}else{
						value_now[1]++
					}
				}
				for(var y of second_data){
					if(y.value == this.time.second){
						break;
					}else{
						value_now[2]++
					}
				}
				var output_hms = {};
				output_hms.lista = hour_data[value_now[0]]  //hour
				output_hms.listb = minute_data[value_now[1]] //minute
				output_hms.listc = second_data[value_now[2]] //second
				this.outputTitle = output_hms
				this.nvalue = value_now
			},
			output04:function(value,hour_data,minute_data,second_data){
				const that = this;
				// console.log(value,hour_data,minute_data,second_data)
				var output_hms = {};
				output_hms.lista = hour_data[value[0]] //hour
				output_hms.listb = minute_data[value[1]] //minute
				output_hms.listc = second_data[value[2]] //second
				this.outputTitle = output_hms
			},
			bindChange:function(e){
				const that = this;
				var value = e.detail.value;
				switch(that.type){
					case "date":
						this.nvalue = [value[0],value[1],value[0]!=this.nvalue[0]?0:(value[1]!=this.nvalue[1]?0:value[2])]
						that.output02(that.nvalue,that.get_year(),that.get_month(),that.get_day(that.nvalue[0],that.nvalue[1]))
					break;
					case "time":
						this.nvalue = [value[0],value[1],value[0]!=this.nvalue[0]?0:(value[1]!=this.nvalue[1]?0:value[2])]
						that.output04(that.nvalue,that.get_hour(),that.get_minute(),that.get_second())
					break;
					case "address":
						this.nvalue = [value[0],value[0] == this.nvalue[0]?value[1]:0,value[0] == this.nvalue[0]?(value[1] == this.nvalue[1]?value[2]:0):0]
						that.get_province()
					break;
				}
			},
			sure:function(){
				this.outData.value = this.nvalue;
				this.outData.data = [this.pickerList01[this.nvalue[0]],this.pickerList02[this.nvalue[1]],this.pickerList03[this.nvalue[2]]]
				this.cellValue = this.outputTitle.lista.name + this.outputTitle.listb.name + this.outputTitle.listc.name
				this.$emit("getData",this.outData)
				this.close()
			}
		}
	}
</script>

<style scoped>
	.time-picker{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.time-picker-bg{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.7);
	}
	.time-picker-view{
		width: 100%;
		height: 400rpx;
	}
	.picker-item{
		text-align:center;
		line-height:34px;
		white-space:nowrap;
		font-size:30rpx;
	}
	.picker-div{
		width: 100%;
		height: 500rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 99;
		background: #FFFFFF;
		transition: transform .4s;
	}
	.picker-header{
		width: 690rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}
	.close{
	    font-size: 30rpx;
	    color: #222222;
	}
	.sure{
	    font-size: 30rpx;
	    color: #1695ef;
	}
	.location{
	    width: 550rpx;
	    font-size: 30rpx;
	    color: #222222;
	    overflow: hidden;
	    text-overflow:ellipsis;
	    white-space: nowrap;
	    text-align: center;
	}
</style>
